import { AtFloatLayout, AtList, AtListItem, AtSearchBar } from "taro-ui";
import { Button, ScrollView, View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import "./index.scss";
import Req from "../../utils/request";
import { useLoad } from "@tarojs/taro";
import { delay } from "../../utils/kit";
import { getInfo } from "../../utils/auth";

interface IProps {
  visible: boolean;
  onClose: () => void;
  onSelect: (item: any) => void;
}

export default function ProjectSelect({ visible, onClose, onSelect }: IProps) {
  const [value, setValue] = useState("");
  const [list, setList] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const onActionClick = () => {
    setList([]);
    setHasMore(true);
    setCurrentPage(1);
    loadData();
  };
  const onChange = (v) => {
    console.log("vvvv", v);
    setValue(v);
  };
  useLoad(() => {
    console.log("load");
    loadData();
  });

  useEffect(() => {
    if (visible && currentPage === 1) {
      setList([]);
      setHasMore(true);
      setCurrentPage(1);
      loadData();
    }
  }, [visible, currentPage]);
  const loadData = () => {
    setLoading(true);

    Req.get(
      "/project/list",
      {
        userId: getInfo()?.userId ?? '',
        title: value,
        pageNum: currentPage,
        pageSize: 10,
      },
      {
        loading: false,
      }
    )
      .then((r) => {
        if (r.total - list.length === 0 || r.rows.length < 10) {
          setHasMore(false);
        }
        setList([...list.concat([...r.rows] as any)]);
        setCurrentPage(currentPage + 1);
        setLoading(false);
      })
      .catch((e) => {
        setLoading(false);
      });
  };
  //滑动到底
  const onScrollIntoEnd = () => {
    if (loading) return;
    if (hasMore) {
      delay(200).then(() => loadData());
    } else {
      setLoading(false);
    }
  };
  const onItemSelect = (row: any) => {
    onSelect(row);
  };
  return (
    <AtFloatLayout
      className="full-floatLayout"
      onClose={() => onClose()}
      isOpened={visible}
    >
      <View className="top-header">
        <AtSearchBar
          className="em-search-bar"
          value={value}
          onChange={onChange}
          onActionClick={onActionClick}
        />
        <Button
          onClick={() => {
            onClose();
          }}
          className="text-button"
        >
          关闭
        </Button>
      </View>
      <ScrollView
        onScrollToLower={onScrollIntoEnd}
        scrollY
        enhanced
        showScrollbar={false}
        className="pm-list"
      >
        <AtList>
          {list.map((item: any, index) => (
            <AtListItem
              onClick={() => {
                onItemSelect(item);
              }}
              className="no-arrow-space"
              key={index}
              title={
                <View className="pm-list-title">
                  {item.areaName && (
                    <Text className="pm-list-tag">{item.areaName}</Text>
                  )}
                  <Text className="pm-list-title-t1 two-line-max-text">
                    {item.companyName}
                  </Text>
                </View>
              }
              note={
                <View className="pm-list-note">
                  <View className="p-m-n-left">
                    <Text className="p-m-n-l-info two-line-max-text">
                      {item.title}
                    </Text>
                    <Text className="p-m-n-l-date">2025-05-17 15:07:40</Text>
                  </View>
                  {item.debt && (
                    <Text className="p-m-n-right">￥{item.debt}</Text>
                  )}
                </View>
              }
            />
          ))}
        </AtList>
        <View className="em-center-text">
          <Text>{hasMore ? "加载中..." : "没有更多了"}</Text>
        </View>
      </ScrollView>
    </AtFloatLayout>
  );
}
